<template>
  <view>
    <view class="pageContainer">
      <view
        class="topArea"
        id="topArea"
      ></view>
      <view class="bottomArea">
        <view class="inputArea">
          <input
            type="text"
            placeholder="连接服务器中..."
            class="message"
            id="inputMessage"
          >
        </view>
        <button
          class="sendButton"
          id="sendButton"
        >发送</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  onShow() {
    uni.connectSocket({
      url: "ws://192.168.1.251:9326",
      success() {
        console.log("连接成功");
      }
    });
    uni.onSocketOpen(function(res) {
      console.log("WebSocket连接已打开！");
    });
    // uni.onSocketOpen(function(res) {
    //   console.log("WebSocket连接已打开！");
    //   console.log("已经打开");
    //   var data = {
    //     cmd: "ping"
    //   };
    //   // _this.sendMessage(data);
    //   uni.sendSocketMessage({
    //     data: data,
    //     success() {
    //       console.log("成功了哦");
    //     }
    //   });
    // });
    uni.onSocketError(function(res) {
      console.log("WebSocket连接打开失败，请检查！");
    });

    // uni.onSocketMessage(function(res) {
    //   console.log("收到服务器内容：" + res.data);
    // });
  },
  onLoad() {
    uni.connectSocket({
      url: "ws://192.168.1.251:9326",
      success() {
        console.log("连接成功");
      }
    });
    uni.onSocketOpen(function(res) {
      console.log("WebSocket连接已打开！");
    });
  }
};
</script>

<style scoped>
body {
  width: 100%;
  margin: 0px;
  background-color: #f0f0f0;
}

.pageContainer {
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
}

.clear {
  clear: both;
}

.topArea {
  width: 100%;
  padding-bottom: 110px;
}

.selfMessage {
  float: right;
  width: 100%;
  text-align: right;
  padding-top: 5px;
}

.otherMessage {
  float: left;
  width: 100%;
  padding-top: 5px;
}

.selfMessage .nameInfo {
  font-size: 12px;
  width: 100%;
  color: #ff5151;
}

.otherMessage .nameInfo {
  font-size: 12px;
  width: 100%;
  color: #0066cc;
}

.detailMessage {
  font-size: 16px;
  width: 100%;
}

.bottomArea {
  width: 100%;
  position: fixed;
  bottom: 0px;
}

.inputArea {
  text-align: center;
  width: 100%;
}

.message {
  background-color: white;
  width: 95%;
  padding-left: 5%;
  height: 45px;
  border-left: none;
  font-size: 16px;
}

.sendButton {
  background-color: #1aad19;
  height: 40px;
  font-size: 16px;
  width: 100%;
  color: #ffffff;
  font-size: 16px;
}
</style>